/*
*   @Author: 1296
*   @Date: 2025-03-21
*   @Description: 个人主页面
*/

<template>
  <div class="main-container">
    <!-- 未登录状态 -->
    <div v-if="!isLoggedIn" class="guest-view">
      <h1 class="not-logged-text">{{ $t('notLoggedIn') }}</h1>
      <div class="carousel-wrapper">
        <div class="carousel-container">
          <Carousel ref="leftCarousel" />
          <p class="carousel-text">{{ $t('studentCarouselText') }}</p>
        </div>
        <div class="carousel-container">
          <Carousel ref="rightCarousel" />
          <p class="carousel-text">{{ $t('teacherCarouselText') }}</p>
        </div>
      </div>
      <button class="login-btn" @click="goToLogin">
        {{ $t('loginPrompt') }}
      </button>
    </div>
    <!-- 已登录状态 -->
    <div v-else class="personal-page">
      <div class="layout">
        <div class="sidebar">
          <nav class="nav-bar">
            <ul class="nav-list">
              <li
                  v-for="(item, key) in menuMap"
                  :key="key"
                  class="nav-item"
                  :class="{ active: activeMenu === key }"
                  @click="changeMenu(item.component, key)"
              >
                {{ $t(key) }}
              </li>
            </ul>
          </nav>
        </div>
        <div class="content">
          <component :is="currentComponent" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* newVal */
import { mapGetters } from 'vuex'
import TodoCheckIn from '@/components/student/TodoCheckIn.vue'
import AttendanceRecord from '@/components/student/AttendanceRecord.vue'
import MyCourses from '@/components/student/MyCourses.vue'
import PublishCheckIn from '@/components/teacher/PublishCheckIn.vue'
import Carousel from '@/components/Carousel.vue'
import SignRecord from "@/components/teacher/SignRecord.vue";
import CourseManage from "@/components/teacher/CourseManage.vue";

export default {
  name: 'PersonalPage',
  components: {
    TodoCheckIn,
    AttendanceRecord,
    MyCourses,
    PublishCheckIn,
    Carousel,
    CourseManage,
    SignRecord
  },
  data() {
    return {
      activeMenu: '',
      currentComponent: '',
    }
  },
  computed: {
    ...mapGetters(['isLoggedIn', 'username', 'role']),
    UserRole() {
      switch (this.role.toString()) {
        case '1':
          return this.$t('teacher')
        case 1:
          return this.$t('teacher')
        case '0':
          return this.$t('student')
        case 0:
          return this.$t('student')
        default:
          return this.$t('unauthorized')
      }
    },
    // 动态生成菜单
    menuMap() {
      if (this.role === 0 || this.role === '0') { // 学生
        return {
          todoCheckIn: { component: 'TodoCheckIn', menu: 'todoCheckIn' },
          attendanceRecord: { component: 'AttendanceRecord', menu: 'attendanceRecord' },
          myCourses: { component: 'MyCourses', menu: 'myCourses' },
        }
      } else if (this.role === 1 || this.role === '1') { // 老师
        return {
          publishCheckIn: { component: 'PublishCheckIn', menu: 'publishCheckIn' },
          SignRecord: { component: 'SignRecord', menu: 'SignRecord' },
          CourseManage: { component: 'CourseManage', menu: 'CourseManage' }
        }
      }
      return {}
    }
  },
  methods: {
    goToLogin() {
      this.$router.push('/loginAndRegister')
    },
    changeMenu(componentName, menuName) {
      this.currentComponent = componentName
      this.activeMenu = menuName
      this.$router.replace({ query: { ...this.$route.query, section: menuName } })
    },
    updateSection(section) {
      if (section && this.menuMap[section]) {
        this.currentComponent = this.menuMap[section].component
        this.activeMenu = section
      } else {
        const firstKey = Object.keys(this.menuMap)[0]
        if (firstKey) {
          this.currentComponent = this.menuMap[firstKey].component
          this.activeMenu = firstKey
        }
      }
    }
  },
  created() {
    this.updateSection(this.$route.query.section)
  },
  watch: {
    role() {
      const firstMenuKey = Object.keys(this.menuMap)[0]
      if (firstMenuKey) this.changeMenu(this.menuMap[firstMenuKey].component, firstMenuKey)
    },
    '$route'(to) {
      this.updateSection(to.query.section)
    }
  },
  mounted() {
    // 初始化轮播图
    if (this.$refs.leftCarousel) {
      this.$refs.leftCarousel.images = [
        require('@/assets/Carousel/guestBanner1.jpg'),
        require('@/assets/Carousel/guestBanner2.jpg'),
        require('@/assets/Carousel/guestBanner3.jpg')
      ]
    }
    if (this.$refs.rightCarousel) {
      this.$refs.rightCarousel.images = [
        require('@/assets/Carousel/guestBanner4.jpg'),
        require('@/assets/Carousel/guestBanner5.jpg'),
        require('@/assets/Carousel/guestBanner6.jpg')
      ]
    }
  }
}
</script>

<style scoped>
.main-container {
  opacity: 1;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.guest-view {
  opacity: 0;
  animation: fadeIn 2s ease forwards;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.not-logged-text {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 20px;
}

.carousel-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
  margin-top: 20px;
}

.carousel-container {
  width: calc(840 / 1920 * 100vw);
  border-radius: 25px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: visible;
  margin: 0 auto;
  padding-top: 15px;
}


.carousel-text {
  text-align: center;
  margin-top: 10px;
  font-size: 1rem;
  color: #555;
}

.login-btn {
  padding: 10px 20px;
  margin-top: 40px;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  background: linear-gradient(45deg, #1e90ff, #00bfff);
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.login-btn:hover {
  background: linear-gradient(45deg, #00bfff, #1e90ff);
  transform: scale(1.05);
}

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 14vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #ffffff 0%, rgba(15,64,245,0.6) 100%);
  box-shadow: 2px 0 8px rgba(0,0,0,0.05);
}

.nav-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2vh 0;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  padding: 1.2vh 2vw;
  margin: 0.8vh 1.2vw;
  font-size: 1vw;
  border-radius: 0.6vw;
  cursor: pointer;
  transition: all 0.25s ease;
  color: #333;
}

.nav-item:hover {
  background: rgba(15,64,245,0.08);
  transform: translateX(4px);
}

.nav-item.active {
  background: rgba(15,64,245,0.1) !important;
  color: #0f40f5 !important;
  font-weight: 500;
}

.nav-item.active:hover {
  background: rgba(15,64,245,0.15) !important;
}

.content {
  flex: 1;
  padding: 4vh 2vw;
  background: #f8f9fa;
}

@media (max-width: 768px) {
  .sidebar {
    width: 25vw;
    min-width: 180px;
  }
  .nav-item {
    font-size: calc(12px + 0.3vw);
    padding: 1vh 1.5vw;
  }
}

@media (max-width: 480px) {
  .layout {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    height: auto;
    min-height: 60vh;
  }
  .nav-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .nav-item {
    flex: 1 1 45%;
    text-align: center;
    margin: 0.5vh 1vw;
  }
}
</style>
